<!-- 承修单位报修量统计 -->
<template>
	<a-card class="container">
		<template #title> 承修单位报修量统计 </template>
		<template #extra>
			<a-button type="primary" class="mybtn" :icon="h(SearchOutlined)" @click="initData">查询</a-button>
			<a-button class="mybtn" :icon="h(RedoOutlined)" @click="restPage">重置</a-button>
		</template>
		<a-form class="search-form" v-model="searchForm">
			<a-form-item label="维修时间： " name="time">
				<a-radio-group :size="size" v-model:value="timeType" @change="initData" button-style="solid">
					<a-radio-button value="a">全部</a-radio-button>
					<a-radio-button value="b">近一年</a-radio-button>
					<a-radio-button value="c">近一月</a-radio-button>
					<a-radio-button value="d">近一周</a-radio-button>
					<a-radio-button value="e">昨日</a-radio-button>
					<a-radio-button value="f">今日</a-radio-button>
					<a-radio-button value="z">自定义日期</a-radio-button>
				</a-radio-group>
				<a-range-picker v-if="timeType=='z'" format="YYYY-MM-DD" @change="onTimePickChange" style="margin-left: 8px" :size="size" />
			</a-form-item>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="维修类型 " name="rep_wo_sizetype" @change="initData">
						<a-radio-group @change="timeChange" :size="size" v-model:value="searchForm.rep_wo_sizetype" button-style="solid">
							<a-radio-button value="">全部</a-radio-button>
							<a-radio-button value="普通维修">普通维修</a-radio-button>
							<a-radio-button value="大中型维修">大中型维修</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="报修区域： ">
						<a-select
							@change="initData"
							placeholder="请选择报修区域"
							v-model:value="searchForm.tj_qy"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="qys"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="报修项目 ">
						<a-select
							@change="initData"
							placeholder="请选择报修项目"
							v-model:value="searchForm.tj_lb"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="lbs"
						></a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="统计图表">
				<div class="items">
					<a-statistic v-for="(itme, inx) in sDatas" :key="inx" class="item" :title="itme.rep_wo_instate1" :value="itme.size_" />
				</div>
				<CxdwBxlEchart :xdata="xData" :ydata="yData" title="承修单位报修量统计" />
			</a-collapse-panel>
			<a-collapse-panel key="2" header="统计表格">
				<a-table
					:dataSource="dataSource"
					:columns="columns"
					:size="size"
					bordered
					:pagination="false"
					:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'total'">
							<a-button v-if="record.total > 0" type="link" @click="toBillSearch('', record.rep_u_id)">{{ record.total }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dsh'">
							<a-button v-if="record.dsh > 0" type="link" @click="toBillSearch('待审核', record.rep_u_id)">{{ record.dsh }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dsl'">
							<a-button v-if="record.dsl > 0" type="link" @click="toBillSearch('待受理', record.rep_u_id)">{{ record.dsl }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dwg'">
							<a-button v-if="record.dwg > 0" type="link" @click="toBillSearch('待完工', record.rep_u_id)">{{ record.dwg }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'ywg'">
							<a-button v-if="record.ywg > 0" type="link" @click="toBillSearch('已完工', record.rep_u_id)">{{ record.ywg }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'sc'">
							<a-button v-if="record.sc > 0" type="link" @click="toBillSearch('删除驳回', record.rep_u_id)">{{ record.sc }}</a-button>
							<span v-else></span>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
		</a-collapse>
	</a-card>
</template>
<script setup>
	import { onMounted, ref, toRefs, reactive, h } from 'vue';
	import { SearchOutlined, RedoOutlined, DownloadOutlined } from '@ant-design/icons-vue';
	import CxdwBxlEchart from '../components/onebar-echart.vue';
	import { RepairApi } from '@/api/repair-api';
	import tool from '@/utils/tool';
	import { useRouter } from 'vue-router';
	const router = useRouter();

	const size = ref('small');
	const activeKey = ref(['1', '2']);
	const timeType = ref('a');

	const xData = ref([]);
	const yData = ref([]);
	const qys = ref([]);
	const lbs = ref([]);

	const sDatas = ref([]);
	const dataSource = ref([]); //列表数据

	let selectDay = [];

	onMounted(() => {
		initParam();
		initData();
	});

	// ----------------------查询表单部分内容---------------------
 
	const onTimePickChange = (value, dateString) => {
		selectDay = dateString;
	};
	// 查询表单数据
	let searchForm = reactive({
		tj_qy: '',
		tj_lb: '',
		rep_wo_sizetype: '',
	});

	// ----------------------列表相关部分---------------------
	const initParam = async function () {
		tool.showLoading();
		const pageParam = await RepairApi.getPageRef();
		tool.hideLoading();
		qys.value = pageParam.查询条件中区域字典;
		lbs.value = pageParam.查询条件中项目字典;
	};
	const restPage = function () {
		searchForm = Object.assign(searchForm, {
			tj_qy: '',
			tj_lb: '',
			rep_wo_sizetype: '',
		});
		timeType.value = 'a';
		initData();
	};
	const initData = async function () {
		if(timeType.value=='z' && selectDay.length==0){
			tool.warning("请输入自定义日期！");
			return;
		}
		let time = [];
		if (timeType.value != 'z') {
			time = tool.getTimeArray(timeType.value);
		} else {
			time = selectDay;
		}
		tool.showLoading();
		let param = {
			tj_time_start: time[0],
			tj_time_end: time[1],
			...searchForm,
		};
		if(!param.tj_qy){
			param.tj_qy = "";
		}
		if(!param.tj_lb){
			param.tj_lb = "";
		}
		const data = await RepairApi.getBxCxdwbxltj(param);
		tool.hideLoading();

		let deps = []; //按部门汇总
		data.datas_old.forEach((ele) => {
			//计算每个部门的总量
			let isHave = false;
			for (let i = 0; i < deps.length; i++) {
				if (deps[i].rep_u_name == ele.rep_u_name) {
					deps[i].size_ = ele.size_;
					isHave = true;
					break;
				}
			}
			//如果不存在，则新增一个部门
			if (!isHave) {
				deps.push({
					size_: ele.size_,
					rep_u_name: ele.rep_u_name,
					rep_u_id: ele.rep_u_id,
				});
			}
		});

		let total = 0;
		let sc = 0;
		let ywg = 0;
		let dsl = 0;
		let dwg = 0;
		let dsh = 0;
		data.datas_change.forEach((ele) => {
			dsh += ele.待审核 || 0;
			dsl += ele.待受理 || 0;
			dwg += ele.待完工 || 0;
			ywg += ele.已完工 || 0;
			sc += ele.删除驳回 || 0;
		});
		total = sc + ywg + dsl + dwg + dsh;
		sDatas.value = [
			{
				rep_wo_instate1: '报修总数',
				size_: total,
			},
			{
				rep_wo_instate1: '待审核',
				size_: dsh,
			},
			{
				rep_wo_instate1: '待受理',
				size_: dsl,
			},
			{
				rep_wo_instate1: '待完工',
				size_: dwg,
			},
			{
				rep_wo_instate1: '已完工',
				size_: ywg,
			},
			{
				rep_wo_instate1: '删除驳回',
				size_: sc,
			},
		];

		let XDataTemp = [];
		let YDataTemp = [];
		deps.forEach((ele) => {
			XDataTemp.push(ele.rep_u_name);
			YDataTemp.push(ele.size_);
		});
		xData.value = XDataTemp;
		yData.value = YDataTemp;

		//列表
		let tableData = [];
		data.datas_change.forEach((ele) => {
			let total = 0;
			total += ele.待审核 || 0;
			total += ele.待受理 || 0;
			total += ele.待完工 || 0;
			total += ele.已完工 || 0;
			total += ele.删除驳回 || 0;
			tableData.push({
				rep_u_id: ele.rep_u_id,
				rep_u_name: ele.rep_u_name,
				dsh: ele.待审核 || 0,
				dsl: ele.待受理 || 0,
				dwg: ele.待完工 || 0,
				ywg: ele.已完工 || 0,
				sc: ele.删除驳回 || 0,
				total,
			});
		});
		dataSource.value = tableData;
	};

	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
			name: 'index',
			fixed: 'left',
			width: '70px',
			align: 'center',
			customRender: (record) => `${record.index + 1}`,
		},
		{
			title: '承修单位',
			dataIndex: 'rep_u_name',
		},
		{
			title: '工单总数',
			dataIndex: 'total',
			align: 'center',
		},
		{
			title: '待审核',
			dataIndex: 'dsh',
			align: 'center',
		},
		{
			title: '待受理',
			dataIndex: 'dsl',
			align: 'center',
		},
		{
			title: '待完工',
			dataIndex: 'dwg',
			align: 'center',
		},
		{
			title: '已完工',
			dataIndex: 'ywg',
			align: 'center',
		},
		{
			title: '删除驳回',
			dataIndex: 'sc',
			align: 'center',
		},
	];

const toBillSearch = function (rep_wo_instate, rep_u_id) {
	const searchFormData = toRefs(searchForm);
	let param = {
		rep_u_id,
		rep_wo_instate,
		rep_wo_tj_qy_1_id: searchFormData.tj_qy.value,
		rep_wo_tj_lb_1_id: searchFormData.tj_lb.value,
		rep_wo_sizetype: searchFormData.rep_wo_sizetype.value,
		timeType: timeType.value,
		selectDay: (selectDay&&selectDay.length>0)?selectDay.join('至'):'',
	};
	tool.saveLocalStorage("BILL_SEARCH_PARAM", JSON.stringify(param));
	router.push({
		path: '/work/gdcx' 
	});
};
</script>
<style lang="less" scoped>
	.container {
		width: 95%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
		.search-form {
			border-bottom: 1px dotted #ccc;
			margin-bottom: 16px;
		}
		.items {
			display: flex;
			flex-direction: row;
			justify-content: center;
			.item {
				text-align: center;
				width: 15%;
				display: inline-block;
			}
		}
	}
	:deep(.ant-statistic-content-value-int) {
		color: '#1D2129';
		font-size: '22px';
		font-weight: 700;
	}
	:deep(.ant-statistic-title) {
		font-size: 12px;
		color: #1d2129;
	}
</style>
